
<div class="videos-bg">
  
  <WingBlank>
    <ng-container *ngIf="videosData.length === 1; else elseTemplate">
      <app-hivideo [index] = 0  [videoSrc]="videosData[0].url" [cssStyle]="'height:100vh;object-fit:cover;'" [playIconCssStyle] = "playIconCss" [autohide] =  "false" [autoPlay]="true"  [forVideos] = true [hivideoidFromVideos] = "hivideoid"></app-hivideo>   
    </ng-container>
    <ng-template #elseTemplate>
      <Carousel [infinite]="false"
      [vertical]="true"
      [dots]="false"
      swipeSpeed = 30
      [selectedIndex]="tagData.data['currentIndex']"
      (beforeChange)="beforeChange($event)"
      (afterChange)="afterChange($event)">
        <CarouselSlide id="CarouselSlide{{i}}" *ngFor="let item of videosData;let i = index" >

        <app-hivideo [index] = i  [videoSrc]="item.url" [cssStyle]="'height:100vh;object-fit:cover;'" [playIconCssStyle] = "playIconCss" [autohide] =  "false" [autoPlay]="true"  [forVideos] = true [hivideoidFromVideos] = "hivideoid"></app-hivideo>   

        </CarouselSlide>
      </Carousel>      
    </ng-template>
    

  </WingBlank>
 
  <!-- <ion-slides [options]="slideOpts" 
  #videos  style="height: 100vh;"
  (ionSlideDidChange)="getIndex(videos)"  >
  <ion-slide *ngFor="let item of tagData.data.videos, let i=index"  >
   
    <app-hivideo  [index] = i  [videoSrc]="item" [cssStyle]="'height:100vh;'" [playIconCssStyle] = "playIconCss" [autohide] =  "false" [autoPlay]="true" ></app-hivideo>  
  </ion-slide>
</ion-slides> -->
  <p class="title-bg">
    <img *ngIf="tagData.data.hideBack !== '1'" [src]="tagData.data.backIcon"  [ngStyle]="tagData.data.backIconCssStyle | styleFilter"
    onerror="this.src='assets/icon/nav_icon_back_fw.png'"
    class="nav-back" appDebounceClick (debounceClick)="backClick(tagData.data)">
    <span *ngIf="titleTips" class="title" [ngStyle]="tagData.data.titleTipsCssStyle | styleFilter">{{titleTips}}</span>
  </p>

  <div class="footer-info-bg" [ngClass]="{'hidden': showDaggerProgress}">
    <!-- <div class="wrapper">
      <div  class="w-text">
          <label *ngIf="tagData.data.videos[index].title && tagData.data.videos[index].infoLink?.link" class="w-btn" appDebounceClick (debounceClick)="openPage(tagData.data.videos[index].infoLink.link)">展开</label>
          {{tagData.data.videos[index].title}}
      </div>
     </div> -->
     <div class="video-desc-bg">
      <p  class="video-desc" *ngIf="tagData.data && tagData.data.videos && tagData.data.videos[index] && tagData.data.videos[index].title">
          {{tagData.data.videos[index].title}}
      </p>
      <p *ngIf="tagData.data && tagData.data.videos && tagData.data.videos[index]?.title && tagData.data.videos[index].infoLink?.link" class="video-desc-btn" appDebounceClick (debounceClick)="openPage(tagData.data.videos[index].infoLink.link)">展开</p>
     </div>

    <div class="user-bg"  appDebounceClick (debounceClick)="openPage(tagData.data.link)">
      <img class="avatar" *ngIf="tagData.data.imgUrl" src="{{tagData.data.imgUrl}}" alt="">
      <div class="user-info-bg">
        <p class="user-info"> <span class="name">{{tagData.data.name}}</span><span class="tag">{{tagData.data.introduce}}</span></p>
        <p class="user-info-1"> 
          <ng-container *ngFor="let item of tagData.data.label">
            <span [ngStyle]="item.cssStyle | styleFilter">{{item.label}}</span>
          </ng-container>
    
      </div>
      
    </div>
    
    <div class="play-progress" id="play-progress" >
      <!-- 默认的小进度 -->
      <div class="play-progress-inner-bg">
        <p class="play-progress-inner" id="play-progress-inner-{{hivideoid}}" [ngClass]="{'hidden': hiddedMinPlayProgress}"></p>
      </div>
  
    </div>

  </div>

  <!-- drag-progress [ngClass]="{'hidden': !showDaggerProgress}" -->
  <div class="footer-drag-progress-bg"  [ngClass]="{'transparent': !showDaggerProgress}">  
    <div class="footer-drag-progress-time-bg">
      <span class="current-time">{{currentTime}}</span>
      <span class="time-sep">/</span>
      <span class="total-time">{{totalTime}}</span>
    </div>    
  </div>
  <div class="footer-drag-progress" id="footer-drag-progress-{{hivideoid}}" [ngClass]="{'transparent': !showDaggerProgress}">
      
    <ion-range #range min="0" (ionChange)="rangeChange($event)" (ionBlur)="rangeOff($event)" max="100" (ionFocus)="rangeOn($event)">
    </ion-range>
  </div> 
<!-- loading -->
  <div class="loading-bg" [ngClass]="{'hidden': hiddenLoading}">
    <p class="loading"></p>
  </div>

  <div class="tool-bg">
    <div *ngFor="let item of tagData.data.buttons" class="btn-bg" appDebounceClick (debounceClick)="actionClick(item)" [ngStyle]="item.cssStyle | styleFilter"  >
      <img  class="btn-icon" src="{{item.iconUrl}}" alt="">
      <p class="btn-title">{{item.label}}</p>
    </div>

    <div *ngFor="let item of tagData.data?.actionButtons" class="btn-bg" appDebounceClick (debounceClick)="actionClick(item)" [ngStyle]="item.cssStyle | styleFilter"  >
      <img  class="btn-icon" src="{{item.iconUrl}}" alt="">
      <p class="btn-title">{{item.label}}</p>
    </div>

  </div>


  
  <div *ngIf="tagData.data.button?.label" [ngClass]="{'hidden': showDaggerProgress}" class="btn" [ngStyle]="tagData.data.button.color | styleFilter" appDebounceClick (debounceClick)="openPage(tagData.data.button.link)">
    {{tagData.data.button.label}}
  </div>
  <div class="guid" [ngClass]="{'hidden': !showGuid}">
    <img  class="guid-gif" src="assets/fw/videos.gif" alt="">
      <p class="guid-label">上滑查看更多视频</p>
  </div>
</div>



